<!DOCTYPE html>
<html>
	<head>
		<!-- 指定小于设备dp的数值会无效 width= -->
		<!-- <meta name="viewport" content="width=490, initial-scale=1" /> -->
		<meta charset="utf-8">
		<title></title>
		<style>
			html {
				font-size: 20px;
			}

			html,
			body {
				padding: 0;
				margin: 0;
				height: 100%;
			}

			.testOne {
				overflow: hidden;
				/* 隐藏溢出的内容 */
				text-overflow: ellipsis;
				/* 显示省略号 */
				white-space: nowrap;
				/* 防止文本换行 */
			}
		</style>
		<script>
			window.onload = () => {
				// 获取viewport的大小
				let width = document.documentElement.clientWidth;
				let height = document.documentElement.clientHeight;
				//alert(`widthe======${width};height=========${height}`)
				// 获取ideal viewport有两种情形
				// 新设备
				let dW1 = window.screen.width;
				let dH1 = window.screen.height;
				// 老设备
				let dW2 = window.screen.width / window.devicePixelRatio;
				let dH2 = window.screen.height / window.devicePixelRatio;
				//alert(`width1======${dW1};height1=========${dH1};width2======${dW2};height2=========${dH2};devicePixelRatio==${window.devicePixelRatio}`)
			}
		</script>
	</head>
	<body style="height: 100%; width: 100%;background-color: #FF0000;display:flex;flex-direction: column;">
		<div style="height:100px; width:300px;display: flex;flex-direction: row;">
			<div style="display: block; background-color: aqua;width:200px">
				aaaaaaaaa
			</div>
			<div style="width: 250px;background-color: bisque;">b</div>
		</div>
		<!-- <div style="height: 100%; width: 50%; background-color: #FFFF00;">
			<input /> -->
			<!--<div id="share" class="Qagan" contenteditable="true"
	         style="height: 100%; width: 100%;display:block;overflow-x:auto; overflow-y:hidden;">
	        <p id="placeholder" style="padding:10px;line-height:30px;color:#666666"></p>
	    </div>-->
			<!-- 其实网页中的px就相当于 手机中的dp单位 -->
			<!-- <div
				style="height: 40px; width:980px;background-color: #00ff00;display:flex;flex-direction: row;justify-content: space-between;">
				<span style="font-size: 0.5rem;">left</span>
				<span>right</span>
			</div>
		</div> -->
		<div style="display: flex; height: 49vh;">
		  <div style="flex: 1; overflow-y: auto;">
		    <div style="height: 2000px;">很多内容...</div> <!-- 现在可以滚动 -->
		  </div>
		</div>
	</body>
</html>